<template>
  <div class="min-h-screen bg-gray-50 ">
    <!-- 审核实习经历 -->
    <div class="ml-10 p-8 " style="transform: translateY(16px);min-width: 1080px; padding: 2rem;">
      <div ref="contentDiv" class="bg-white rounded-lg shadow-sm p-6"
        style="min-width: 1080px; margin-left: 300px; height: 670px;">
        <!-- 状态筛选 -->
        <div class="flex gap-4 mb-6">
          <button v-for="tab in tabs" :key="tab.value" @click="currentTab = tab.value"
            :class="{ 'bg-blue-500 text-white': currentTab === tab.value, 'bg-gray-100 text-gray-600': currentTab !== tab.value, 'rounded-md': true }"
            class="px-4 py-2 text-sm font-medium whitespace-nowrap">
            {{ tab.label }}
          </button>
        </div>
        <!-- 表格 -->
        <div class="overflow-x-auto table-container">
          <table class="min-w-full">
            <thead class="bg-gray-50">
              <tr>
                <th v-for="header in tableHeaders" :key="header"
                  class="py-3.5 px-4 text-left text-sm font-medium text-gray-900">
                  {{ header }}
                </th>
              </tr>
            </thead>
            <tbody class="divide-y divide-gray-200">
              <tr v-for="item in paginatedTableData" :key="item.id">
                <td class="py-4 px-4 text-sm text-gray-900">{{ item.studentName }}</td>
                <td class="py-4 px-4 text-sm text-gray-600">{{ item.company }}</td>
                <td class="py-4 px-4 text-sm text-gray-600">{{ item.position }}</td>
                <td class="py-4 px-4 text-sm text-gray-600">{{ item.internshipTime }}</td>
                <td class="py-4 px-4">
                  <div class="flex items-center gap-3">
                    <template v-if="currentTab === 'pending'">
                      <button @click="approve(item)"
                        class="px-3 py-1 text-sm text-white bg-green-500 rounded-md whitespace-nowrap">通过</button>
                      <button @click="reject(item)"
                        class="px-3 py-1 text-sm text-white bg-red-500 rounded-md whitespace-nowrap">不通过</button>
                    </template>
                    <button @click="openDetail(item)"
                      class="px-3 py-1 text-sm text-white bg-blue-500 rounded-md whitespace-nowrap">详情</button>
                    <template v-if="currentTab === 'approved'">
                      <span class="flex items-center gap-1 text-green-600">
                        <i class="iconfont icon-gou1"></i>
                        <i class="fas fa-check-circle"></i>
                        <span class="text-sm">已通过</span>
                      </span>
                    </template>
                    <template v-if="currentTab === 'rejected'">
                      <span class="flex items-center gap-1 text-red-600">
                        <i class="fas fa-times-circle"></i>
                        <i class="iconfont icon-chacha"></i>
                        <span class="text-sm">未通过</span>
                      </span>
                    </template>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <!-- 分页 -->
        <div class="flex items-center justify-between mt-6">
          <div class="flex items-center gap-2">
            <div class="relative">
              <div class="px-3 py-1 text-sm border rounded-md !rounded-button whitespace-nowrap flex items-center gap-2">
                共 {{ itemsPerPage }} 条信息
                <i class="fas fa-chevron-down text-xs"></i>
              </div>
            </div>
          </div>

          <div class="flex item-center gap-2">
            <el-pagination background layout="prev, pager, next" :total="100">
            </el-pagination>
          </div>

        </div>
      </div>
    </div>

    <!-- 弹窗 -->
    <div v-if="showPopup" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
      <div class="bg-white rounded-lg w-800px max-h-90vh flex flex-col">
        <!-- 标题区域 -->
        <div class="flex justify-between items-center p-6 border-b">
          <h2 class="text-2xl font-bold">实习详情</h2>
          <button class="text-gray-500 hover:text-gray-700" @click="closePopup">
            <i class="fas fa-times text-xl"></i>
          </button>
        </div>
        <!-- 内容区域 -->
        <div class="flex-1 overflow-y-auto p-6">
          <!-- 实习基本信息 -->
          <div class="mb-8">
            <h3 class="text-lg font-semibold mb-4 flex items-center">
              <i class="fas fa-building text-blue-500 mr-2"></i> 实习基本信息
            </h3>
            <div class="grid grid-cols-2 gap-4">
              <div class="flex items-start">
                <span class="text-gray-500 w-24">实习公司：</span>
                <span class="font-medium">{{ currentInternship.company }}</span>
              </div>
              <div class="flex items-start">
                <span class="text-gray-500 w-24">实习岗位：</span>
                <span class="font-medium">{{ currentInternship.position }}</span>
              </div>
              <div class="flex items-start">
                <span class="text-gray-500 w-24">公司规模：</span>
                <span class="font-medium">{{ currentInternship.companySize }}</span>
              </div>
              <div class="flex items-start">
                <span class="text-gray-500 w-24">开始时间：</span>
                <span class="font-medium">{{ currentInternship.startDate }}</span>
              </div>
              <div class="flex items-start">
                <span class="text-gray-500 w-24">结束时间：</span>
                <span class="font-medium">{{ currentInternship.endDate }}</span>
              </div>
              <div class="flex items-start">
                <span class="text-gray-500 w-24">实习天数：</span>
                <span class="font-medium">{{ currentInternship.duration }}</span>
              </div>
            </div>
          </div>
          <!-- 实习成果 -->
          <div>
            <h3 class="text-lg font-semibold mb-4 flex items-center">
              <i class="fas fa-briefcase text-green-500 mr-2"></i> 实习成果
            </h3>
            <div>{{ currentInternship.results }}</div>
          </div>
        </div>
        <!-- 底部操作栏 -->
        <div class="border-t p-6 flex justify-end space-x-4">
          <button class="px-4 py-2 bg-blue-600 text-white flex items-center" @click="exportPDF">
            <i class="fas fa-file-pdf mr-2"></i> 导出 PDF
          </button>
          <button class="px-4 py-2 border border-gray-300 text-gray-700 flex items-center" @click="closePopup">
            <i class="fas fa-times mr-2"></i> 关闭
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue';
const contentDiv = ref();

const currentTab = ref('pending');
const tabs = [
  { label: '审核中', value: 'pending' },
  { label: '已通过', value: 'approved' },
  { label: '未通过', value: 'rejected' }
];
const tableHeaders = ['学生姓名', '实习公司', '实习岗位', '实习时间', '操作'];

const currentInternship = reactive({
  studentName: '',
  company: '',
  position: '',
  companySize: '',
  startDate: '',
  endDate: '',
  duration: '',
  results: ''
});

const tableData = [
  { id: 1, studentName: '张三', company: '阿里巴巴', position: '软件工程师', internshipTime: '2023-01-01 至 2023-06-30' },
  { id: 2, studentName: '李四', company: '腾讯公司', position: '数据分析师', internshipTime: '2023-03-01 至 2023-08-31' },
];

const currentPage = ref(1);
const itemsPerPage = ref(50); 
const jumpToPage = ref(1);

const paginatedTableData = computed(() => {
  const start = (currentPage.value - 1) * itemsPerPage.value;
  const end = start + itemsPerPage.value;
  return tableData.slice(start, end);
});

const totalPages = computed(() => {
  return Math.ceil(tableData.length / itemsPerPage.value);
});

const previousPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--;
  }
};

const nextPage = () => {
  if (currentPage.value < totalPages.value) {
    currentPage.value++;
  }
};

const goToPage = (page) => {
  if (page >= 1 && page <= totalPages.value) {
    currentPage.value = page;
    jumpToPage.value = page;
  }
};

const approve = (item) => {
  // 处理通过按钮的点击事件，例如更新状态
  console.log('通过:', item);
};

const reject = (item) => {
  // 处理不通过按钮的点击事件，例如更新状态
  console.log('不通过:', item);
};

const openDetail = (item) => {
  currentInternship.studentName = item.studentName;
  currentInternship.company = item.company;
  currentInternship.position = item.position;
  currentInternship.startDate = item.internshipTime.split(' 至 ')[0];
  currentInternship.endDate = item.internshipTime.split(' 至 ')[1];
  currentInternship.duration = calculateDays(currentInternship.startDate, currentInternship.endDate);
  currentInternship.results = '完成了项目A，提升了技能B...'; // 示例内容
  currentInternship.companySize = '1000+人'; // 示例内容
  showPopup.value = true;
};

const calculateDays = (startDate, endDate) => {
  const start = new Date(startDate).getTime();
  const end = new Date(endDate).getTime();
  return Math.round((end - start) / (1000 * 60 * 60 * 24));
};

const closePopup = () => {
  showPopup.value = false;
};

const exportPDF = () => {
  // 导出PDF的逻辑
};

const showPopup = ref(false);
const setContentWidth = () => {
  if (contentDiv.value) {
    const windowWidth = window.innerWidth;
    contentDiv.value.style.width = `${windowWidth * 0.75}px`;
    contentDiv.value.style.marginLeft = `${windowWidth * 0.1}px`;
  }
};
onMounted(() => {
  setContentWidth();
  window.addEventListener('resize', setContentWidth);
});
</script>

<style scoped>input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}</style>
